身為保安宮虔誠的信徒,今天依舊來畫保安宮的子民人數,參考
【Day 3】分群的直條圖,要把這張圖做個修改,改畫成堆疊的長條圖。
分群長條圖
和 堆疊長條圖
Plot.plot({
x: {
type: "band",
label: null // 不顯示 x 軸 "村里"
},
marks: [
Plot.barY(village_gender_population, {x: "村名", y: "人數", fill: "性別"}),
Plot.ruleY([0])
]
})
Plot.plot({
width: 1000, // 指定圖寬度
height: 400, // 指定圖高度
marginBottom: 50, // 指定下邊界距離
color: {
domain: ["男性", "女性"],
range: ["#2828FF", "#FF79BC"], // 指定分類顏色
legend: true, // 標示顏色代表的分類
labelAnchor: "center"
},
x: {
type: "band",
label: null, // 不顯示 x 軸 "村名"
domain: d3.sort(xihu_population, d => -d.合計).map(d => d.村名), // 總人數由多到少排序
tickRotate: -45, // 旋轉 x 軸 tick 角度
tickFormat: d => d.slice(0,2) // 顯示村名前兩個字
},
y: {
domain: [0, 7000], // 界定 y 軸範圍
tickFormat: "s", // 以單位 "千(人) k" 顯示
grid:true,
ticks: 7, // 人數每間隔一千人顯示標示
label: "人數"
},
marks: [
Plot.barY(village_gender_population, {x: "村名", y: "人數", fill: "性別"}),
Plot.ruleY([0]),
Plot.text(xihu_population, {x: "村名", y: "合計", text: d => `${d.合計}`, dy: -10, textAnchor: "middle", fontSize: 14,}), // 顯示每個里的總人數
Plot.frame(), // 圖加上邊框
],
caption: "西湖村里人口數統計",
})
堆疊長條圖可以看出各里的總人數,各裡的男女面積比例各佔總人數的一半。
參考
https://observablehq.com/@observablehq/plot-cheatsheets-scales